<template>
  <div>
    <!-- <button @click="change">改变active</button> -->

    <user-detail v-if="isLogin" @getItemSe="getItemSe"></user-detail>
    <div class="backgroundimg" v-else>
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn%2Fw1600h883%2F20180131%2F7f94-fyrcsrw1609425.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663553283&t=f0b7f6fdd746338dbe1687c0ecfa8dac"
      />
      <van-tabs v-model:active="active">
        <van-tab title="登录">
          <login></login>
        </van-tab>
        <van-tab title="注册">
          <register @gotoLogin="gotoLogin"></register>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import login from "./Login.vue";
import register from "./Register.vue";
import userDetail from "./UserDetail.vue";
import { userIds } from "@/stores/counter";
import { getInfo } from "@/model/until";
let userInfos = userIds();
let active = ref(0);

let isLogin = ref(false);
onMounted(async () => {
  let token = window.localStorage.getItem("token");
  if (token) {
    console.log('have')
    isLogin.value = true;
    await getInfo(
      {},
      { Authorization: window.localStorage.getItem("token") }
    ).then(res => {
      userInfos.changeInfo(res.data.user);
      console.log(res.data.user);
    });
  } else {
    isLogin.value = false;
  }
});
let getItemSe = ()=> {
  isLogin.value = false;
}
let gotoLogin = () => {
  active.value = 0;
};
// let  change = ()=>{
//     active.value  =1;
// }
</script>

<style lang="scss">
.backgroundimg {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>